<template>
  <section id="section-advantage" class="d-flex flex-column align-items-center">
    <SectionTitle title="我们的优势" sub-title="Our advantage" />
    <b-carousel
      background="transparent"
      img-width="180"
      img-height="180"
      indicators
    >
      <b-carousel-slide
        v-for="slide in advantageSlides"
        :key="slide.id"
        :caption="slide.title"
        :text="slide.desc"
        :img-src="slide.imgSrc"
      />
    </b-carousel>
  </section>
</template>

<script>
import SectionTitle from '@/components/m/SectionTitle';

export default {
  components: {
    SectionTitle,
  },
  data() {
    return {
      advantageSlides: [
        {
          id: 0,
          imgSrc: '/images/m-adv-slide-0.png',
          title: '购物返利',
          desc:
            '自购省钱、分享赚钱，魁牛平台赋能会员专属优享折扣，自购分享最高省40%，会员拥有更多分享推荐权限。',
        },
        {
          id: 1,
          imgSrc: '/images/m-adv-slide-1.png',
          title: '购物返利1',
          desc:
            '1自购省钱、分享赚钱，魁牛平台赋能会员专属优享折扣，自购分享最高省40%，会员拥有更多分享推荐权限。',
        },
        {
          id: 2,
          imgSrc: '/images/m-adv-slide-2.png',
          title: '购物返利2',
          desc:
            '2自购省钱、分享赚钱，魁牛平台赋能会员专属优享折扣，自购分享最高省40%，会员拥有更多分享推荐权限。',
        },
        {
          id: 3,
          imgSrc: '/images/m-adv-slide-3.png',
          title: '购物返利3',
          desc:
            '3自购省钱、分享赚钱，魁牛平台赋能会员专属优享折扣，自购分享最高省40%，会员拥有更多分享推荐权限。',
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
#section-advantage {
  background-color: #fff;
  padding-top: 30px;
  padding-bottom: 30px;
  // ::v-deep .carousel-inner {
  //   overflow: visible;
  // }
  .carousel {
    margin-top: 18px;
  }
  ::v-deep .carousel-item {
    // margin-right: 180px;
    // width: 180px;
    img {
      width: 180px !important;
      height: 180px !important;
    }
  }
  ::v-deep .carousel-item.active {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  ::v-deep .carousel-item.carousel-item-next {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  ::v-deep .carousel-caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    top: 0px;
    left: 0px;
    padding-top: 22px;
    padding-bottom: 0px;
    h3 {
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: #000000;
      line-height: 22px;
      letter-spacing: 0.5px;
      margin-bottom: 12px;
    }
    p {
      width: 320px;
      font-size: 13px;
      color: #4a4a4a;
      line-height: 18px;
      letter-spacing: 0.41px;
      text-align: center;
      margin-bottom: 0px;
    }
  }
  ::v-deep .carousel-indicators {
    position: relative;
    margin-top: 23px;
    margin-bottom: 0px;
    li {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #d8d8d8;
    }
    li.active {
      background-color: rgba(253, 190, 34, 1);
    }
  }
}
</style>
